import React, { useState } from 'react';
import { Row, Col, Button, Image } from 'antd';
import MangeMask from './components/manageMash';
const Cephalogram = (props) => {
  const { src = 'error', onChange } = props;
  const [visible, setVisible] = useState(false);
  return (
    <>
      <div>
        <div style={{
          marginLeft: 8
        }}>
          背景图片<span style={{
            color: '#e64340',

          }}>*</span>
        </div>
        <div style={{ marginLeft: 8 }} span={12}>
          <div
            onClick={(e) => {
              e.stopPropagation();
            }}
            className={`renderSetting_img`}
          >
            <div className="renderSetting_absoluteBox">
              <div className="renderSetting_image">
                <Image
                  width={169}
                  height={299}
                  preview={false}
                  src={src}
                  fallback=""
                />
              </div>
              <Button onClick={() => setVisible({
                show: true
              })} type='link'>选择素材</Button>
            </div>
          </div>
        </div>

      </div>



      <MangeMask
        handleImage={(e) => {
          setVisible(() => {
            onChange(e);
            return false;
          });
        }}
        visible={visible}
        onClose={() => setVisible(false)}
      ></MangeMask>
    </>
  );
};
export default Cephalogram;
